<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="../templates/Myui.xhtml">
	<ui:define name="head">

	</ui:define>

	<ui:define name="content">


		<script type="text/javascript">  
		 $(function(){
			$("#cate dt").click(function(){
				$('#cate dt').removeClass('active');
				$(this).closest('dt').addClass('hide');	
				$(this).next().addClass('hide');					
				$(this).next()
					.slideToggle(200)
					.siblings("dd").slideUp(300);
			});
		}); 
			/**
		//<![CDATA[
		$( document ).ready(function() {
			$('#cate > dt').click(function() {
			  $('#cate dt').removeClass('active');
			  $(this).closest('dt').addClass('active');	
			  var checkElement = $(this).next();
			  alert(checkElement);
			  if((checkElement.is('dd')) && (checkElement.is(':visible'))) {
			    $(this).closest('li').removeClass('active');
			    checkElement.slideUp('normal');
			  }
			  if((checkElement.is('dd')) && (!checkElement.is(':visible'))) {
			    $('#cate ul ul:visible').slideUp('normal');
			    checkElement.slideDown('normal');
			  }
			  if($(this).closest('li').find('ul').children().length == 0) {
			    return true;
			  } else {
			    return false;	
			  }		
			});
			});
		//]]>
		**/




		
</script>



		<div id="dataPage">
			<div>
				<div
					style="float: left; padding-left: 64px; color: rgb(221, 75, 57); font-size: 20px; font-family: Arial, sans-serif;">Accounts</div>
			</div>
			<BR /> <BR />
			<DIV style="border-bottom: 1px solid rgb(235, 235, 235);"></DIV>
<br />
			<div>
				<div
					style="float: left; width: 244px; font-family: Arial, sans-serif; font-size: 13px;">

					<dl id="cate">
						<dt title="" style="text-align: left; padding: 6px 48px;" class="active"><span>Account</span></dt>
						<dd style="margin-left: 0px; padding: 0px 36px;">
							<ul style="list-style: none; text-align: left; text-decoration: none;">
								<li style="padding: 3px;"><a href="#" style="text-decoration: none;color:rgb(97, 97, 97);">Account Activity</a></li>
								<li style="padding: 3px;"><a href="#" style="text-decoration: none;color: rgb(97, 97, 97);">Dashboard</a></li>
								<li style="padding: 3px;"><a href="#" style="text-decoration: none;color: rgb(97, 97, 97);">About Me</a></li>
							</ul>
						</dd>
						<dt title="" style="text-align: left; padding: 6px 48px;" class="active"><span>Security</span></dt>
						<dd style="margin-left: 0px; padding: 0px 36px;">
							<ul style="list-style: none; text-align: left;">
								<li style="padding: 3px;"><a href="#" style="text-decoration: none;color: rgb(97, 97, 97);">Profile and privacy</a></li>
								<li style="padding: 3px;"><a href="#" style="text-decoration: none;color:rgb(97, 97, 97);">Help</a></li>
							</ul>
						</dd>
					</dl>






				</div>
				<div style="margin-left: 244px; "></div>
			</div>

		</div>
	</ui:define>
</ui:composition>